<template>
  <div class="my-container">
    <!-- 左边 -->
    <el-card class="left-box-card">
      <!-- 我的 -->
      <div class="my">
        <div class="left">
          <el-avatar :size="118" :src="userInfo.avatar"></el-avatar>
        </div>
        <div class="center">
          <p>{{ userInfo.nickname }}</p>
          <p>
            <a>312<span>获赞</span></a>
            <a>310<span>粉丝</span></a>
            <a>219<span>关注</span></a>
          </p>
          <p>简介：{{ userInfo.introduce || "TA很懒，还没有添加简介" }}</p>
        </div>
        <div class="right">
          <el-button
            round
            icon="el-icon-edit"
            size="small"
            @click="$router.push({ name: 'UserSettings' })"
            >编辑资料</el-button
          >
        </div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="历史" name="history">
          <historyItem :data="history"> </historyItem>
        </el-tab-pane>
        <el-tab-pane label="收藏" name="collection">
          <collectionItem :data="collection" />
        </el-tab-pane>
        <el-tab-pane label="评论" name="comments">
          <commentItem :data="comment" />
        </el-tab-pane>
        <el-tab-pane label="点赞" name="likes">
          <likesItem :data="likes" />
        </el-tab-pane>
        <el-tab-pane label="关注" name="focus">
          <focus :data="followings" @refresh="getUserFollowings" />
        </el-tab-pane>
        <el-tab-pane label="粉丝" name="fans">
          <fans :data="followers"> </fans>
        </el-tab-pane>
        <el-tab-pane label="文章" name="article">
          <articleItem :data="article" />
        </el-tab-pane>
        <el-tab-pane
          label="举报"
          name="accusation"
          v-if="this.user_id == userId"
        >
          <accusation :data="accusation" @refresh="getUserReport" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import historyItem from '@/views/item'
import collectionItem from '@/views/item'
import likesItem from '@/views/item'
import articleItem from '@/views/articleItem'
import fans from '@/views/Friends'
import focus from '@/views/focus'
import commentItem from '@/views/commentItem'
import accusation from '@/views/accusation'
import {
  getUserFollowers,
  getUserFollowings,
  getUserHomePage
} from '@/api/user'
import { getUserComment } from '@/api/comment'
import {
  getUserArticleViewHistory,
  getUserArticleCollections,
  getUserArticleLikings,
  getUserArticle,
  getUserReport
} from '@/api/article'
export default {
  components: {
    historyItem,
    collectionItem,
    likesItem,
    fans,
    focus,
    commentItem,
    articleItem,
    accusation
  },
  data () {
    return {
      activeName: 'likes',
      history: {},
      collection: {},
      likes: {},
      followers: {},
      followings: {},
      comment: {},
      article: {},
      accusation: {},
      userInfo: {},
      user_id: this.$route.params.user_id
    }
  },
  watch: {
    $route (to, from) {
      // 监听路由是否变化
      console.log(to, from)
      if (to.params.user_id != from.params.user_id) {
        this.user_id = to.params.user_id
        this.getUserHomePage(this.user_id)
        this.getLikings(this.user_id)
      }
      if (to.hash != from.hash) {
        if (to.hash === '#collection') {
          this.activeName = 'collection'
          this.getCollection(this.user_id)
        } else if (to.hash === '#history') {
          this.getHistory(this.user_id)
          this.activeName = 'history'
        }
        this.activeName = 'likes'
      }
    }
  },
  created () {
    if (this.$route.hash && this.user_id) {
      if (this.$route.hash == '#collection') {
        this.getCollection(this.user_id)
        this.activeName = 'collection'
      }
      if (this.$route.hash == '#history') {
        this.getHistory(this.user_id)
        this.activeName = 'history'
      }
      if (this.$route.hash == '#comments') {
        this.getUserComment(this.user_id)
        this.activeName = 'comments'
      }
      // if(this.$route.hash=='#likes'){
      //   this.getLikings(this.user_id)
      //   this.activeName = 'likes'
      // }
    }

    if (this.user_id) {
      this.getUserHomePage(this.user_id)
      this.getLikings(this.user_id)
    }
  },
  computed: {
    ...mapGetters(['avatar', 'userId', 'name'])
  },
  methods: {
    handleClick () {
      if (this.activeName == 'history') {
        this.getHistory(this.user_id)
      } else if (this.activeName == 'collection') {
        this.getCollection(this.user_id)
      } else if (this.activeName == 'comments') {
        this.getUserComment(this.user_id)
      } else if (this.activeName == 'likes') {
        this.getLikings(this.user_id)
      } else if (this.activeName == 'focus') {
        this.getUserFollowings(this.user_id)
      } else if (this.activeName == 'fans') {
        this.getFollowers(this.user_id)
      } else if (this.activeName == 'article') {
        this.getUserArticle(this.user_id)
      } else if (this.activeName == 'accusation') {
        this.getUserReport(this.user_id)
      }
    },
    // 获取用户信息
    async getUserHomePage (user_id) {
      const user = await getUserHomePage(user_id)
      this.userInfo = user
    },
    // 获取用户举报文章列表
    async getUserReport (user_id) {
      this.accusation = await getUserReport(user_id)
    },
    // 获取用户文章列表
    async getUserArticle (user_id) {
      this.article = await getUserArticle(user_id)
    },
    // 获取用户评论列表
    async getUserComment (user_id) {
      this.comment = await getUserComment(user_id)
    },
    // 获取用户关注列表
    async getUserFollowings (user_id) {
      this.followings = await getUserFollowings(user_id)
    },
    // 获取用户粉丝列表
    async getFollowers (user_id) {
      this.followers = await getUserFollowers(user_id)
    },
    // 获取用户浏览文章历史记录
    async getHistory (user_id) {
      this.history = await getUserArticleViewHistory(user_id)
    },
    // 获取用户收藏文章列表
    async getCollection (user_id) {
      this.collection = await getUserArticleCollections(user_id)
    },
    // 获取用户点赞文章列表
    async getLikings (user_id) {
      this.likes = await getUserArticleLikings(user_id)
    }
  }
}
</script>
<style lang="scss" scoped>
.my-container {
  margin-top: 15px;
  width: 851px;
  min-width: 851px;
  // height: 100vh;
}
.my {
  margin-top: 28px;
  width: 100%;
  height: 118px;
  // background: rgb(236, 233, 233);
  display: flex;
  .left {
    width: 118px;
    .el-avatar {
      border: 4px solid #eee;
    }
  }
  .center {
    margin: 8px 30px 0 50px;
    width: 526px;
    p {
      margin: 0;
    }
    p:nth-child(1) {
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 15px;
    }
    p:nth-child(2) {
      margin-bottom: 15px;
      a {
        font-weight: 500;
        font-size: 24px;
        margin-right: 20px;
      }
      span {
        font-weight: 400;
        margin-left: 3px;
        font-size: 15px;
      }
    }
    p:nth-child(3) {
      font-size: 16px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; //隐藏文字
    }
  }
  .right {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
  }
}
.el-tabs {
  margin-top: 48px;
  height: 100vh;
}
</style>
